<template>
  <Dialog v-model="dialogVisible" title="拆分">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formLabels"
      label-width="120px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="模版标识">
            <el-input v-model="formData.newtamplateid"
          /></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="模版名称" prop="fathername">
            <el-input v-model="formData.newtamplatename" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

  <!-- 顶级模版 -->
  <Tag ref="tagRef" v-model="formData" />
</template>
<script lang="ts" setup>
import Tag from './Tag.vue'
import * as BiaoqianApi from '@/api/system/biaoqian'
// const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

// 测试标签合并页面树形结构展示及选择
const formData = ref({
  labelid: '',
  tamplateid: '',
  newtamplateid: '',
  newtamplatename: ''
})
// defineOptions<{ data: string }>()
// 设置表单必填项验证
const formLabels = reactive({
  ruleName: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
})
/**打开标签模版操作 */
const tagRef = ref()

const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (id: string, tamplateid: string) => {
  // 把选中的标签节点 id 和 标识id保存到formData中
  formData.value.labelid = id
  formData.value.tamplateid = tamplateid
  dialogVisible.value = true
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const submitForm = async () => {
  console.log(formData.value, '===========formData.value')

  const formData2 = new FormData()
  formData2.append('labelId', formData.value.labelid)
  formData2.append('tamplateid', formData.value.tamplateid)
  formData2.append('newtamplateid', formData.value.newtamplateid)
  formData2.append('newtamplatename', formData.value.newtamplatename)
  await BiaoqianApi.splitLabel(formData2)
  dialogVisible.value = false
}

const openKeywords = ref()
</script>
